<!--
 * @Description  : 专题
 * @Author       : YiDing Xue
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-10
-->
<template>
  <AppPage class="bg-[#f2f2f2]" :header-class="'bg-[#f4f4f4]'">
    <template #center>
      <p class="text-14 color-[#666]">专题</p>
    </template>

    <section v-for="item in worksTopic" :key="item.moduleWorksId" bg-white p-20 mb-20>
      <router-link :to="{ name: 'topicDetail', query: { moduleId: item.moduleId } }">
        <nut-image height="180" :src="item.imgUrl" />
      </router-link>

      <div class="mt-10">
        <h3 fw-500>{{ item.moduleName }}</h3>
        <p class="text-12 mt-10 color-[#888]">{{ item.intro }}</p>
      </div>
    </section>
  </AppPage>
</template>

<script setup>
import { topic } from '@/api/index'

const worksTopic = ref([])
/** 获取作品专题 */
const getTopic = async () => {
  const result = await topic()
  worksTopic.value = result.data
}

onMounted(() => {
  getTopic()
})
</script>
